<template>
  <span :class="'attachment-item '+ (isActive? 'active': '') " @mouseover="isActive = true" @mouseout="isActive = false">
     <div class="pic">
         <img :src="tFileInfo.url" v-if="tFileInfo.type === 'image' && !imageError" @error="imageError = true"/>
         <div :class="'iconfont '+ tFileInfo.icon" v-if="tFileInfo.type !== 'image' && !imageError"></div>
         <div :class="'iconfont '+ imageIcon" v-if="imageError"></div>
     </div>
     <div class="mask">
         <div class="btns">
            <el-button type="text" size="mini" @click="downloadFile()">
                  <i class="iconfont icon-download"></i>
            </el-button>
            <el-button type="text" size="mini" v-if="tFileInfo.type === 'image'" @click="view()">
                  <i class="iconfont icon-visible"></i>
            </el-button>
         </div>
     </div>
     <div class="file-name">
         {{tFileName}}
     </div>
   
  </span>
</template>
<script>
import { download } from '@/utils/download';
import {GET_ATTACHMENT} from '@/config';
import cookie from '@/helper/cookie';
export default {
  /**
   * @prop [type] 附件类型
   * @prop [url] 附件地址
   * @prop [viewOnly] 是否只允许查看
   */
  props: {
    fileName: {
      type: String,
      default: ''
    },
    imgId: {
      type: String,
      default: ''
    },
    viewOnly: {
      type: Boolean
    }
  },
  data() {
    return {
      isActive: false,
      imageError: false,
      defaultIcon: 'icon-file',
      errorIcon: 'icon-multiply',
      imageIcon: 'icon-image',
      url: '',
      fileMap: [
        { type: 'excel', suffix: ['xls', 'xlsx'], icon: 'icon-excel' },
        {
          type: 'image',
          suffix: ['jpg', 'png', 'tif', 'gif'],
          icon: 'icon-image'
        },
        { type: 'pdf', suffix: ['pdf'], icon: 'icon-pdf' },
        { type: 'ppt', suffix: ['ppt', 'pptx'], icon: 'icon-ppt' },
        { type: 'txt', suffix: ['txt'], icon: 'icon-txt' },
        { type: 'word', suffix: ['doc', 'docx'], icon: 'icon-word' },
        { type: 'zip', suffix: ['zip', 'rar'], icon: 'icon-zip' },
        { type: 'audio', suffix: ['wav', 'mp3'], icon: 'icon-audio' }
      ]
    };
  },
  computed: {
    tFileName() {
      let fileName = '';
      // 如果没有传文件名，尝试从url获取文件名
      if (this.fileName) {
        fileName = this.fileName;
      } else if (this.url) {
        let u = this.url.split('/');
        if (u.length > 0) {
          fileName = u[u.length - 1];
        }
      }
      return fileName;
    },
    tFileInfo() {
      let suffix = '',
        type = '',
        icon = '';
      // 获取扩展名
      suffix = this.tFileName.replace(/.+\./, '');
      if (suffix) {
        // 查找匹配的扩展名，获取相应图标
        for (let i = 0; i < this.fileMap.length; i++) {
          let item = this.fileMap[i];
          if (item.suffix.includes(suffix)) {
            type = item.type;
            icon = item.icon;
            break;
          }
        }
        // 如果找不到相应的类型，给一个默认图标
        if (!type && this.url) {
          type = 'default';
          icon = this.defaultIcon;
        }
      }
      return {
        type: type,
        icon: icon,
        url: this.url
      };
    }
  },
  methods: {
    handleError(e) {
      this.url = '';
    },
    downloadFile() {
      download(this.url, this.tFileName);
    },
    view() {
      this.$emit('view', { url: this.url, name: this.tFileName });
    }
  },
  created() {
    this.url = `${GET_ATTACHMENT}/${this.imgId}?SESSION=${cookie('SESSION')}`;
  }
};
</script>
<style  type="text/scss" lang="scss" scoped>
.attachment-item {
  cursor: pointer;
  position: relative;
  width: 100px;
  height: 100px;
  display: inline-block;
  .pic {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    .iconfont {
      font-size: 50px;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .file-name {
    text-align: center;
  }
  .mask {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.2);
    .btns {
      background-color: #ecf5ff;
      position: absolute;
      bottom: 0;
      color: #ffffff;
      text-align: center;
      width: 100%;
      .iconfont {
        font-size: 16px;
      }
    }
  }
  &.active .mask {
    display: block;
  }
}
</style>